<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<meta charset="utf-8">
	<title>同步设置</title>
	<script>var d=document;
	var loc = false, locip, locproto = "http:";
	function gId(s){return d.getElementById(s);}
	function toggle(el){gId(el).classList.toggle("hide"); gId('No'+el).classList.toggle("hide");}
	function H(){window.open("https://kno.wled.ge/interfaces/udp-notifier/");}
	function B(){window.open(getURL("/settings"),"_self");}
	function adj(){if (d.Sf.DI.value == 6454) {if (d.Sf.EU.value == 1) d.Sf.EU.value = 0;}
					else if (d.Sf.DI.value == 5568) {if (d.Sf.DA.value == 0) d.Sf.DA.value = 1; if (d.Sf.EU.value == 0) d.Sf.EU.value = 1;} }
	// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
	function loadJS(FILE_URL, async = true) {
		let scE = d.createElement("script");
		scE.setAttribute("src", FILE_URL);
		scE.setAttribute("type", "text/javascript");
		scE.setAttribute("async", async);
		d.body.appendChild(scE);
		// success event 
		scE.addEventListener("load", () => {
			//console.log("File loaded");
			GetV();SetVal();
		});
		// error event
		scE.addEventListener("error", (ev) => {
			console.log("Error on loading file", ev);
			alert("Loading of configuration script failed.\nIncomplete page data!");
		});
	}
	function FC()
	{
		for(j=0;j<8;j++)
		{
			gId("G"+(j+1)).checked=gId("GS").value>>j&1;
			gId("R"+(j+1)).checked=gId("GR").value>>j&1;
		}
	}
	function GC()
	{
		var a=0, b=0;

		var m=1;
		for(j=0;j<8;j++)
		{
			a+=gId("G"+(j+1)).checked*m;
			b+=gId("R"+(j+1)).checked*m;
			m*=2;
		}
		gId("GS").value=a;
		gId("GR").value=b;
	}
	function SP(){var p = d.Sf.DI.value; gId("xp").style.display = (p > 0)?"none":"block"; if (p > 0) d.Sf.EP.value = p;}
	function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568: d.Sf.DI.value = 5568; break; case 6454: d.Sf.DI.value = 6454; break; case 4048: d.Sf.DI.value = 4048; break; }; SP();FC();}
	function S(){
		let l = window.location;
		if (l.protocol == "file:") {
			loc = true;
			locip = localStorage.getItem('locIp');
			if (!locip) {
				locip = prompt("文件模式. 请输入WLED IP!");
				localStorage.setItem('locIp', locip);
			}
		} else {
			// detect reverse proxy
			let paths = l.pathname.slice(1,l.pathname.endsWith('/')?-1:undefined).split("/");
			if (paths.length > 2) {
				locproto = l.protocol;
				loc = true;
				locip = l.hostname + (l.port ? ":" + l.port : "") + "/" + paths[0];
			}
		}
		loadJS(getURL('/settings/s.js?p=4'), false);	// If we set async false, file is loaded and executed, then next statement is processed
		if (loc) d.Sf.action = getURL('/settings/sync');
	}
	function getURL(path) {
		return (loc ? locproto + "//" + locip : "") + path;
	}
	</script>
	<style>@import url("style.css");</style>
</head>
<body onload="S()">
<form id="form_s" name="Sf" method="post" onsubmit="GC()">
<div class="toprow">
<div class="helpB"><button type="button" onclick="H()">?</button></div>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
</div>
<h2>同步设置</h2>
<h3>WLED广播</h3>
UDP 端口: <input name="UP" type="number" min="1" max="65535" class="d5" required><br>
第二端口: <input name="U2" type="number" min="1" max="65535" class="d5" required><br>
<h3>同步组</h3>
<input name="GS" id="GS" type="number" style="display: none;"><!-- hidden inputs for bitwise group checkboxes -->
<input name="GR" id="GR" type="number" style="display: none;">
<table style="margin: 0 auto;">
	<tr>
		<td></td>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
	<tr>
		<td>发送:</td>
		<td><input type="checkbox" id="G1" name="G1"></td>
		<td><input type="checkbox" id="G2" name="G2"></td>
		<td><input type="checkbox" id="G3" name="G3"></td>
		<td><input type="checkbox" id="G4" name="G4"></td>
		<td><input type="checkbox" id="G5" name="G5"></td>
		<td><input type="checkbox" id="G6" name="G6"></td>
		<td><input type="checkbox" id="G7" name="G7"></td>
		<td><input type="checkbox" id="G8" name="G8"></td>
	</tr>
	<tr>
		<td>接收:</td>
		<td><input type="checkbox" id="R1" name="R1"></td>
		<td><input type="checkbox" id="R2" name="R2"></td>
		<td><input type="checkbox" id="R3" name="R3"></td>
		<td><input type="checkbox" id="R4" name="R4"></td>
		<td><input type="checkbox" id="R5" name="R5"></td>
		<td><input type="checkbox" id="R6" name="R6"></td>
		<td><input type="checkbox" id="R7" name="R7"></td>
		<td><input type="checkbox" id="R8" name="R8"></td>
	</tr>
</table><br>
接收: <nowrap><input type="checkbox" name="RB">亮度,</nowrap> <nowrap><input type="checkbox" name="RC">颜色,</nowrap> <nowrap>and <input type="checkbox" name="RX">特效</nowrap><br>
<input type="checkbox" name="SO"> 段选项, <input type="checkbox" name="SG"> 极限<br>
发送直接更改通知: <input type="checkbox" name="SD"><br>
发送按下按钮或红外通知: <input type="checkbox" name="SB"><br>
发送Alexa通知: <input type="checkbox" name="SA"><br>
发送Philips Hue变化通知: <input type="checkbox" name="SH"><br>
发送宏通知: <input type="checkbox" name="SM"><br>
UDP数据包重传: <input name="UR" type="number" min="0" max="30" class="d5" required><br><br>
<i>需要重新启动才能应用更改.</i>
<hr class="sml">
<h3>实例列表</h3>
启用实例列表: <input type="checkbox" name="NL"><br>
使此实例可被发现: <input type="checkbox" name="NB">
<hr class="sml">
<h3>实时</h3>
实时接收UDP: <input type="checkbox" name="RD"><br>
仅使用主线段: <input type="checkbox" name="MO"><br><br>
<i>网络DMX输入</i><br>
类型:
<select name=DI onchange="SP(); adj();">
<option value=5568>E1.31 (sACN)</option>
<option value=6454>Art-Net</option>
<option value=0 selected>定制端口</option>
</select><br>
<div id=xp>端口: <input name="EP" type="number" min="1" max="65535" value="5568" class="d5" required><br></div>
多播: <input type="checkbox" name="EM"><br>
启动设备: <input name="EU" type="number" min="0" max="63999" required><br>
<i>要求重启.</i> 检查 <a href="https://github.com/LedFx/LedFx" target="_blank">LedFx</a>!<br>
跳过无序的数据包: <input type="checkbox" name="ES"><br>
DMX 开始地址: <input name="DA" type="number" min="1" max="510" required><br>
DMX 分段间距: <input name="XX" type="number" min="0" max="150" required><br>
E1.31 端口优先级: <input name="PY" type="number" min="0" max="200" required><br>
DMX 模式:
<select name=DM>
<option value=0>禁用</option>
<option value=1>单 RGB</option>
<option value=2>单 DRGB</option>
<option value=3>特效</option>
<option value=7>Effect + 白</option>
<option value=8>Effect 段</option>
<option value=9>Effect 段 + 白</option>
<option value=4>多 RGB</option>
<option value=5>调光器 + 多 RGB</option>
<option value=6>多 RGBW</option>
<option value=10>预设</option>
</select><br>
<a href="https://kno.wled.ge/interfaces/e1.31-dmx/" target="_blank">E1.31 信息</a><br>
超时: <input name="ET" type="number" min="1" max="65000" required> ms<br>
强制最大亮度: <input type="checkbox" name="FB"><br>
禁用实时伽玛校正: <input type="checkbox" name="RG"><br>
实时LED偏移: <input name="WO" type="number" min="-255" max="255" required>
<hr class="sml">
<h3>Alexa语音助手</h3>
<div id="NoAlexa" class="hide">
	<i class="warn">此固件版本不包括Alexa支持.<br></i><br>
</div>
<div id="Alexa">
模拟Alexa设备: <input type="checkbox" name="AL"><br>
Alexa调用名称: <input type="text" name="AI" maxlength="32"><br>
模拟设备调用第一个<input name="AP" type="number" class="s" min="0" max="9" required> 预设<br><br>
</div>
<hr class="sml">
<div class="warn">&#9888; <b>MQTT和Hue同步所有连接到的外部主机!<br>
	这可能会影响WLED的响应能力.</b><br>
</div>
为了获得最佳效果，一次只使用其中一项服务.<br>
(或者，将第二个ESP连接到它们并使用UDP同步)
<hr class="sml">
<h3>MQTT</h3>
<div id="NoMQTT" class="hide">
	<i class="warn">此固件构建不包括MQTT支持。<br></i>
</div>
<div id="MQTT">
启用 MQTT: <input type="checkbox" name="MQ"><br>
代理: <input type="text" name="MS" maxlength="32">
端口: <input name="MQPORT" type="number" min="1" max="65535" class="d5"><br>
<b>MQTT凭据是通过不安全的连接发送的。<br>
切勿将MQTT密码用于其他服务!</b><br>
用户名: <input type="text" name="MQUSER" maxlength="40"><br>
密码: <input type="password" name="MQPASS" maxlength="64"><br>
客户端 ID: <input type="text" name="MQCID" maxlength="40"><br>
设备标题: <input type="text" name="MD" maxlength="32"><br>
组标题: <input type="text" name="MG" maxlength="32"><br>
按下按钮发布: <input type="checkbox" name="BM"><br>
保留亮度和颜色信息: <input type="checkbox" name="RT"><br>
<i>需要重新启动才能应用更改. </i><a href="https://kno.wled.ge/interfaces/mqtt/" target="_blank">MQTT 信息</a>
</div>
<h3>Philips Hue</h3>
<div id="NoHue" class="hide">
	<em class="warn">此固件版本不包括对飞利浦Hue的支持.<br></em>
</div>
<div id="Hue">
<i>你可以在hue应用程序的“关于”部分找到桥接IP和灯号.</i><br>
Poll Hue灯光 <input name="HL" type="number" min="1" max="99" > 每 <input name="HI" type="number" min="100" max="65000"> ms: <input type="checkbox" name="HP"><br>
然后，接收<input type="checkbox" name="HO"> 开/关, <input type="checkbox" name="HB"> 亮度, 和 <input type="checkbox" name="HC"> 颜色<br>
Hue 桥 IP:<br>
<input name="H0" type="number" class="s" min="0" max="255" > .
<input name="H1" type="number" class="s" min="0" max="255" > .
<input name="H2" type="number" class="s" min="0" max="255" > .
<input name="H3" type="number" class="s" min="0" max="255" ><br>
<b>按下桥接器上的按钮，然后保存此页面!</b><br>
(第一次连接时)<br>
Hue 状态: <span class="sip"> 在此生成中禁用 </span>
</div>
<h3>串行总线</h3>
波特率:
<select name=BD>
<option value=1152>115200</option>
<option value=2304>230400</option>
<option value=4608>460800</option>
<option value=5000>500000</option>
<option value=5760>576000</option>
<option value=9216>921600</option>
<option value=10000>1000000</option>
<option value=15000>1500000</option>
</select><br>
<i>保持115200以使用改进. 一些板子可能不支持这么高的波特率.</i>
<hr>
<button type="button" onclick="B()">返回</button><button type="submit">保存</button>
</form>
</body>
</html>